Vue Js Get Src from Iframe:To get the “src” attribute value of an iframe in Vue.js, you can use the “ref” attribute to create a reference to the iframe element, and then access its “src” property in the component’s methods or computed properties.
How can I retrieve the src attribute value of an <iframe> element in Vue js?
This Vue.js code defines a component with an iframe and a button that, when clicked, updates the value of iframeSrc with the src attribute of the iframe. Here’s how it works:
- The
datafunction defines an initial value foriframeSrcas an empty string. - The
getIframeSrcmethod is called when the button is clicked. It retrieves thesrcattribute of the iframe using therefproperty to get a reference to the iframe element. - The
iframeSrcproperty is updated with the retrievedsrcvalue, which causes Vue.js to update the DOM and display thepelement containing the iframe’s source URL.
Note that this code is using the $refs property to get a reference to the iframe element. This is a Vue.js feature that allows components to access child components or DOM elements with a unique ref attribute.
Vue Js Get Src from Iframe Example
<div id="app">
<iframe ref="myIframe" width="100%" height="400"
src="https://www.youtube.com/embed/EdRYy38C_gE?list=RDEdRYy38C_gE"
title="Jaane Dil Mein - Full Song | Mujhse Dosti Karoge | Hrithik Roshan, Rani, Lata Mangeshkar, Sonu Nigam"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen>
</iframe>
<button @click="getIframeSrc">Get Iframe Src</button>
<p v-if="iframeSrc">iframe Src: {{iframeSrc}}</p>
</div>
<script type="module">
const app = new Vue({
el: "#app",
data() {
return {
iframeSrc: ''
};
},
methods: {
getIframeSrc() {
this.iframeSrc = this.$refs.myIframe.src;
}
}
})
</script>
Output of Vue Js Get Src from iframe
